<template>
  <div class="my-page">
    <!-- 头部信息区增加头像交互 -->
    <div class="profile-header">
      <div class="avatar-container">
        <div class="avatar-column">
          <div class="avatar-wrapper">
            <!-- 修改头像路径 -->
            <img src="@/assets/images/profile picture.jpg" class="avatar" alt="学生头像">
            <div class="avatar-hover-mask">
              <i class="el-icon-camera"></i>
              <span>更换头像</span>
            </div>
          </div>
          <h1 class="user-name">李同学</h1>
        </div>
        <div class="user-info">
         
        </div>
        <div class="user-details">
          <!-- <div class="info-item">
            <i class="el-icon-school"></i>
           
          </div> -->
          <div class="info-item">
            <i class="el-icon-school"></i>
            <span>手机号: 12345678910</span>
          </div>
          <div class="info-item">
            <i class="el-icon-message"></i>
            <span>邮箱: li@student.com</span>
          </div>
        </div>
      </div>
    </div>
  
    <!-- 学习进度区增加动态加载效果 -->
    <div class="info-section">
      <h2 class="section-title"><i class="el-icon-data-line"></i> 学习进度</h2>
      <div class="progress-bars">
        <div class="progress-item" v-for="(item, idx) in progressList" :key="idx">
          <div class="progress-header">
            <label class="subject-name">{{item.subject}}</label>
            <span class="progress-percent">{{item.percent}}%</span>
          </div>
          <div class="progress-visual">
            <el-progress 
              :percentage="item.percent" 
              :stroke-width="14" 
              :color="item.color"
              :native-on="{ animationend: () => {} }"
              :class="['progress-bar', {'progress-animated': item.animated}]"
            ></el-progress>
            <div class="progress-bar-chart">
              <div 
                class="chart-bar" 
                :style="{width: item.percent + '%', backgroundColor: item.color}"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 新增学习统计区 -->
    <div class="info-section">
      <h2 class="section-title"><i class="el-icon-data-analysis"></i> 学习统计</h2>
      <div class="stats-grid">
        <div class="stat-card" v-for="(value, key) in studyStats" :key="key">
          <div class="stat-value">{{value}}</div>
          <div class="stat-label">{{ 
            key === 'totalHours' ? '总学习时长(小时)' : 
            key === 'completedCourses' ? '已完成课程' : '连续学习天数'
          }}</div>
        </div>
      </div>
    </div>
    <!-- 新增最近活动区 -->
    <div class="info-section">
      <h2 class="section-title"><i class="el-icon-time"></i> 最近学习</h2>
      <div class="activity-list">
        <div class="activity-item" v-for="(item, index) in recentActivities" :key="index">
          <div class="activity-course">{{item.course}}</div>
          <div class="activity-action">{{item.action}}</div>
          <div class="activity-time">{{item.time}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 结构化数据提升可维护性
const progressList = [
  { subject: '物理', percent: 85, color: '#67C23A', animated: true },
  { subject: '数学', percent: 78, color: '#409EFF', animated: true },
  { subject: '化学', percent: 65, color: '#E6A23C', animated: true }
]

// 新增学习统计数据
const studyStats = {
  totalHours: 156,
  completedCourses: 12,
  currentStreak: 7
}

// 新增最近学习记录
const recentActivities = [
  { course: '物理', time: '2小时前', action: '完成了第3章测试' },
  { course: '数学', time: '昨天', action: '复习了三角函数' },
  { course: '化学', time: '3天前', action: '完成了实验报告' }
]
</script>

<style scoped>

/* 新增学习统计样式 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.stat-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #409EFF;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

/* 新增最近活动样式 */
.activity-list {
  background: white;
  border-radius: 8px;
  padding: 15px;
}

.activity-item {
  padding: 12px 0;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-course {
  font-weight: 500;
  color: #303133;
}

.activity-action {
  color: #606266;
}

.activity-time {
  color: #909399;
  font-size: 13px;
}
.my-page {
  padding: 30px 15px;
  max-width: 1000%;
  margin: 0 auto;
  background: #f8f9fa; /* 调整整体背景色更柔和 */
}

/* 头部信息区优化 */
.profile-header {
  background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 100%);
  padding: 25px 30px;
  margin-bottom: 35px;
  border-radius: 12px; /* 增大圆角 */
  position: relative;
  overflow: hidden; /* 隐藏悬停遮罩溢出 */
}

.avatar-wrapper {
  position: relative;
  display: inline-block;
}

.avatar {
  width: 110px;
  height: 110px;
  border-width: 5px;
  border-color: #409eff1a;
  box-shadow: 0 6px 18px rgba(64, 158, 255, 0.2);
  transition: transform 0.3s ease;
  border-radius: 50%; /* 添加这行使头像变成圆形 */
}

.avatar:hover {
  transform: scale(1.05); /* 头像悬停放大 */
}

.avatar-hover-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.avatar-hover-mask i {
  font-size: 24px;
  margin-bottom: 5px;
}

.avatar-wrapper:hover .avatar-hover-mask {
  opacity: 1; /* 悬停显示更换头像提示 */
}

.user-name {
  font-size: 26px;
  color: #2c3e50;
  font-weight: 600;
  margin-bottom: 8px; /* 调整姓名与学号间距 */
}

.student-id {
  font-size: 15px;
  color: #7f8c8d;
  margin-top: 0;
}

/* 主内容卡片优化 */
.info-card {
  padding: 30px 35px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); /* 更柔和的卡片阴影 */
  background: white;
  border-radius: 12px; /* 统一卡片圆角 */
}

/* 通用标题样式 */
.section-title {
  font-size: 19px;
  color: #2d3436;
  font-weight: 600;
  margin-bottom: 25px; /* 增大标题与内容间距 */
  display: flex;
  align-items: center;
}

.section-title i {
  font-size: 24px; /* 增大图标尺寸 */
  color: #409eff;
  margin-right: 12px;
}

/* 个人信息区优化 */
.info-grid {
  gap: 20px;
}

.info-item {
  padding: 15px 20px; /* 增大信息项内边距 */
  background: #f8f9fa;
  border-radius: 8px; /* 增大信息项圆角 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* 添加信息项阴影 */
  transition: transform 0.3s ease;
}

.info-item:hover {
  transform: translateX(5px); /* 信息项悬停右移 */
}

.info-label {
  min-width: 120px;
  color: #4b6584;
  font-weight: 500;
  font-size: 15px; /* 增大标签字号 */
}

.info-value {
  color: #2d3436;
  font-weight: 400;
  font-size: 15px; /* 增大内容字号 */
}

/* 学习进度区优化 */
.progress-item {
  margin-bottom: 28px;
}

.progress-header {
  margin-bottom: 10px; /* 增大进度头与进度条间距 */
}

.subject-name {
  color: #4b6584;
  font-weight: 500;
  font-size: 16px; /* 增大科目名称字号 */
}

.progress-percent {
  color: #409eff;
  font-weight: 600;
  font-size: 16px; /* 增大百分比字号 */
}

.progress-bar {
  transition: width 0.8s ease-in-out; /* 进度条动态加载效果 */
}

/* 近期浏览标签优化 */
.tags-container {
  gap: 12px; /* 增大标签间距 */
}

.custom-tag {
  height: 34px; /* 增大标签高度 */
  line-height: 32px;
  padding: 0 18px; /* 增大标签内边距 */
  border-radius: 17px; /* 保持标签圆润 */
  font-size: 15px;
  border-width: 2px; /* 加粗标签边框 */
  transition: all 0.3s ease;
}

.custom-tag:hover {
  transform: translateY(-2px) scale(1.03); /* 悬停放大+上移 */
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.25); /* 增强悬停阴影 */
}

/* 在style部分添加以下微调 */
.profile-header {
  transition: all 0.3s ease; /* 添加头部过渡效果 */
}

.profile-header:hover {
  box-shadow: 0 10px 30px rgba(64, 158, 255, 0.15); /* 增强悬停阴影 */
}

.info-item {
  transition: all 0.3s ease, box-shadow 0.3s ease; /* 添加多重过渡 */
}

.custom-tag {
  position: relative;
  overflow: hidden;
}

.custom-tag::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: all 0.5s ease;
}

.custom-tag:hover::after {
  left: 100%; /* 添加标签流光效果 */
}

/* 新增样式 */
.personal-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0;
}

.info-card-item {
  padding: 10px;
  background: #f5f7fa;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.info-label {
  color: #606266;
  font-size: 13px;
  margin-bottom: 5px;
}

.info-value {
  color: #303133;
  font-weight: 500;
}
</style>

<style scoped>
.avatar-container {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.user-info {
  margin-top: 10px;
}

.user-details {
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #606266;
}

.info-item i {
  color: #409EFF;
}
</style>

<style scoped>
.basic-info {
  margin-top: 15px;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.info-item i {
  margin-right: 8px;
  color: #409EFF;
}

.info-label {
  color: #606266;
  margin-right: 5px;
}

.info-value {
  color: #303133;
  font-weight: 500;
}
</style>

<style scoped>
.info-line-item {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #ebeef5;
  transition: all 0.3s ease;
  cursor: pointer;
}

.info-line-item:hover {
  background: #f5f7fa;
}

.line-label {
  flex: 1;
  font-size: 14px;
  color: #606266;
}

.line-value {
  flex: 2;
  font-size: 14px;
  color: #303133;
  text-align: right;
  padding-right: 10px;
}

.info-line-item i {
  color: #c0c4cc;
}
</style>

<style scoped>
.info-card-item {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 15px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
}

.info-card-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.card-icon {
  width: 40px;
  height: 40px;
  background: #f0f7ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.card-icon i {
  font-size: 20px;
  color: #409EFF;
}

.card-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 5px;
}

.card-value {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}
</style>

<style scoped>
.progress-visual {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.progress-bar-chart {
  height: 10px;
  background: #ebeef5;
  border-radius: 5px;
  overflow: hidden;
}

.chart-bar {
  height: 100%;
  transition: width 0.8s ease-in-out;
  border-radius: 5px;
}
</style>
